<template>
    <div class="searchLishi">
        <van-cell title="搜索历史">
        <div v-show="isDeleteShow">
          <span @click="searchHistories.splice(0)">全部删除</span>
            &nbsp;&nbsp;
          <span @click="isDeleteShow = false">完成</span>
        </div>
        <!--  如果isDeleteShow为false，则显示删除按钮。
        点击删除按钮将isDeleteShow变为true，进入删除状态 -->
        <van-icon name="delete" @click="isDeleteShow = true" v-show="!isDeleteShow"/>
      </van-cell>
      <van-cell 
      :title="obj" 
      v-for="(obj,index) in searchHistories"
      :key="index"
      @click="delFn(obj,index)"
      >
        <van-icon name="close"   v-show="isDeleteShow"/>
      </van-cell>
    </div>
</template>

<script>
export default {
  name: 'searchLishi',
  props: {
    searchHistories: {
        type: Array,
        required: true
    }
  },
  components: {},
  data () {
   return {
    isDeleteShow: false // 定义当前是否是删除状态
   }
  },
  computed: {},
  watch: {},
  methods: {
    // 单项删除
    delFn(obj,index) {
      if(this.isDeleteShow){
        // 删除状态，删除历史记录数据
        this.searchHistories.splice(index,1)
      }else {
        console.log(123);
        // 非删除状态，直接进入频道
         this.$emit('search', obj)
      }
    }
  },
  created () {
  },
  mounted () {
  },
}
</script> 

<style scoped lang="less">

</style>